<template>
  <div class="chart-container">
    <div class="chart-controls">
      <!-- <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="date-picker"
        size="small"
      >
      </el-date-picker> -->
    </div>
    <div
      :class="className"
      :style="{ height: height, width: width }"
      class="chart"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from "./mixins/resize";
export default {
  // mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
  },
  data() {
    return {
      chart: null,
      dateRange:[]
    };
  },
  // created() {
  //   this.initChart();
  // },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el.querySelector('.chart'), "macarons");
      const that = this;
      this.chart.setOption({
        title: {
          text: '个人已完成订单（实收金额）',
          textStyle: {
            color: "#333", // 字体颜色设置为黑色
            fontWeight: "bold", // 加粗字体
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          left: "",
          top: "90%",
          data: ["简历醒目标签",'简历置顶'],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            roseType: "radius",
            radius: [25, 95],
            radius: ["30%", "45%"],
            data: [
              { value: 0.0, name: "简历醒目标签" },
              { value: 0.0, name: "简历置顶" },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  .chart-controls {
    position: absolute;
    right: 10px;
    // top: 5px;
    z-index: 999;
  }
}
</style>
